@extends('admin.tableLayout')
@section('title','用户列表')
@section('barName','用户列表')
@section('quote')
    @can('user_add')
            <button type="button" class="layui-btn layui-btn-small" id="getAll" onclick="location.href='{{route('admin.user_add')}}'"><i class="fa fa-plus" aria-hidden="true"></i> 添加管理员</button>
    @elsecannot('user_add')
        <button type="button" class="layui-btn layui-btn-small" id="getAll" > 无权限</button>

    @endcan
            <form class="layui-form" style="float:right;">
                <div class="layui-inline">
                    <input type="text" class="layui-input" width="200px" id="datetime" name="searchTime" value="{{$searchTime or ''}}" placeholder="日期范围搜索">
                </div>
                <div class="layui-inline">
                    <input type="text" name="searchKey" placeholder="关键字查询" autocomplete="off" value="{{$searchKey or ''}}" class="layui-input">
                </div>
                <button lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
            </form>
@endsection

@section('checkbox_btn')

    <script type="text/html" id="roleTpl">
        @{{#  if(d.roles.length>0){ }}
        @{{ d.roles[0].name}}
        @{{#  } else { }}
        普通用户
        @{{#  } }}
    </script>
    @endsection
@section('toolbar')
    @can('user_detail')
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    @endcan
    @can('user_edit')
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    @endcan
    @can('user_set')
        <a class="layui-btn layui-btn-mini" lay-event="user_set">前台权限</a>
        @endcan
    @can('user_display')
    @{{#  if(d.display_writing == 0){ }}
    <a class="layui-btn layui-btn-mini" lay-event="show">显示所有作品</a>
    @{{#  } else { }}
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="display">屏蔽所有作品</a>
    @{{#  } }}
@endcan

@endsection


@section('tableRender')
<script>
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        var $=layui.jquery;
      var render=  table.render({
            elem:"#table",
            page:true,
            id:'idTest',
            url:'{{route('admin.user.ajaxList')}}',
            where:{searchKey:$("input[name='searchKey']").val(),searchTime:$("input[name='searchTime']").val()},
            height:400,
            cols:  [[ //标题栏
                {checkbox:true,fixed:true},
                {field: 'id', title: 'ID', width: 80},
                {field: 'roles', title: '角色', width: 100,templet:"#roleTpl"},
                {field: 'name', title: '用户名', width: 150},
                {field: 'email', title: '邮箱', width: 250},
                {field: 'created_at', title: '创建时间', width: 250},
                {fixed: 'right', width:400,title:'操作', align:'center', toolbar: '#toolbar'}
                //这里的toolbar值是模板元素的选择器
            ]],
            response: {//返回格式自定义
                statusName: 'code' //数据状态的字段名称，默认：code
                ,statusCode: 0 //成功的状态码，默认：0
                ,msgName: 'msg' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
        });
        table.on('checkbox(table)', function(obj){
            console.log(obj)
        });

        //上方
        var   active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        table.on('tool(table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){ //查看
                //todo 查看
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }  else if (layEvent === 'display'){//屏蔽会员的所有作品
                layer.confirm('是否屏蔽所有作品的显示', function(index){
                    layer.close(index);
                    //向服务端发送删除指令
                    $.get('/admin/user/'+data.id+'/display',{display:0},function (obj) {
                        if (obj.info == 'success') {
                            layer.msg('屏蔽成功', {icon: 1});
                            render.reload();
                        } else {
                            layer.msg('网络繁忙', {icon: 5});
                        }
                    })
                });

            }  else if (layEvent === 'show'){//显示会员的所有作品
                layer.confirm('是否屏蔽所有作品的显示', function(index){
                    layer.close(index);
                    //向服务端发送删除指令
                    $.get('/admin/user/'+data.id+'/display',{display:1},function (obj) {
                        if (obj.info == 'success') {
                            layer.msg('显示成功', {icon: 1});
                            render.reload();
                        } else {
                            layer.msg('网络繁忙', {icon: 5});
                        }
                    })
                });

            }else if(layEvent==='前台权限'){//前台权限
                location.href='/admin/user/'+data.id+'/user_set';
            }  else if(layEvent === 'edit'){ //编辑
                //do something
                //同步更新缓存对应的值
              location.href="/admin/user/"+data.id+"/edit";
            }
        });
    });
</script>
   @endsection

